<template>
  <div class="common-layout">
    <!-- 顶部栏 -->
    <el-header class="header">
      <div class="header-left">
        <el-avatar :size="50" :src="txData.pic" class="avatar" /> <span class="logo">Arco Pro</span>
      </div>
      <div class="header-right">
        <!-- 用户信息 -->
        <span class="txData">{{ txData.name }}</span>
        <el-avatar :size="50" :src="txData.pic" class="avatar" />

        <!-- 下拉菜单 -->
        <el-dropdown placement="bottom">
          <el-button type="primary">用户消息</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>The Action 1st</el-dropdown-item>
              <el-dropdown-item>The Action 2nd</el-dropdown-item>
              <el-dropdown-item>
                <el-button plain @click="open">退出登录</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主体布局 -->
    <el-container class="main-container">
      <!-- 左侧导航 -->
      <el-aside width="200px" class="aside">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
       
          <el-sub-menu index="1">
            <template #title>
               <el-icon>
                <location />
              </el-icon>
              <span>仪表盘</span>
            </template>
            <el-menu-item index="/home/ybp1">仪表盘</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>数据可视化</span>
            </template>
            <el-menu-item index="/home/card">数据可视化</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>列表页</span>
            </template>
            <el-menu-item index="/home/xr">列表页</el-menu-item>
          </el-sub-menu>
           <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>列表页</span>
            </template>
            <el-menu-item index="/home/bd">列表页</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容 -->
      <el-main class="main-content">
        <!-- 查询表格区域 -->
  

        <!-- 路由视图（可扩展表格、列表等） -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
// 假设 API 路径与你的项目一致
import { getUserInfoApi } from '@/api/api'

// 路由
const router = useRouter()

// 用户信息
const txData = ref({})
getUserInfoApi().then((res) => {
  console.log(res)
  txData.value = res.data.data
})

// 退出登录
const open = () => {
  ElMessageBox.confirm(
    '退出后将无法访问系统，是否继续？',
    '退出确认',
    {
      confirmButtonText: '确认退出',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      // localStorage.removeItem('token')
      localStorage.clear()
      router.push('/login')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消退出',
      })
    })
}

// 表单数据
const formData = reactive({
  collectionId: '',
  collectionName: '',
  contentCarrier: '',
})

// 菜单展开/收起事件
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
/* 顶部栏样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;

  .header-left {
    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .txData {
      margin-right: 10px;
    }

    .avatar {
      margin-right: 20px;
    }
  }
}

/* 主体布局 */
.main-container {
  display: flex;
  height: calc(100vh - 60px);
  /* 减去顶部栏高度 */
}

/* 左侧导航 */
.aside {
  background: #f5f7fa;
  border-right: 1px solid #e6e6e6;

  .el-menu-vertical-demo {
    border-right: none;
  }
}

/* 右侧内容 */
.main-content {
  padding: 20px;
  background: #fff;
  flex: 1;
}

/* 查询表格样式 */
.query-form-container {
  margin-bottom: 20px;

  .form-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .el-form {
    display: flex;
    align-items: center;

    .el-form-item {
      margin-right: 20px;
    }
  }
}
</style>